<template>
  <div class="reg">
    <h2>注册</h2>
    <p>&emsp;用户名：<input type="text" v-model="username" /></p>
    <p>&emsp;&emsp;密码：<input type="password" v-model="userpass" /></p>
    <p>确认密码：<input type="password" v-model="reuserpass" /></p>
    <p>&emsp;验证码：<input type="text" v-model="usercode" /></p>
    <span>{{ code }}</span>
    <p><input type="button" value="注册" @click="register" /></p>
    <div>
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  name: "RegUser",
  data() {
    return {
      username: "admin",
      userpass: "123456",
      reuserpass: "123456",
      code: "",
      msg: "",
      usercode: "",
    };
  },
  created() {
    this.$http({
      url: "vips",
      mothod: "post",
    });
    this.createCode();
  },
  methods: {
    createCode() {
      let str = "";
      for (var i = 0; i < 4; i++) {
        str += (Math.random() * 10).toFixed(0);
      }
      this.code = str;
    },
    register() {
      this.msg = "";
      if (this.userpass != this.reuserpass) {
        this.msg = "两次密码不一致";
        return;
      }
      if (this.code != this.usercode) {
        this.msg = "验证码输入错误";
        return;
      }
      // axios.get(url,{配置}) axios.post(url,data,{配置})

      // 方法一 data是json对象
      // this.$http({
      //   url: "/vips",
      //   method: "post",
      //   data: {
      //     username: this.username,
      //     userpass: this.userpass,
      //   },
      // })

      // 方法二 data是字符串
      // this.$http.post('/vips',`username=${this.username}&userpass=${this.userpass}`)

      // 方法三 data是URLSearchParams对象
      var data = new URLSearchParams()
      data.append('username',this.username)
      data.append('userpass',this.userpass)
      this.$http({
        url:'/vips',
        method:'post',
        data
      })
        .then((res) => {
          
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style scoped>
.reg {
  text-align: center;
  font-size: 1rem;
}
</style>